<template>
  <div class="home">
    <main>
      <router-view></router-view>
    </main>
          <TabBar :list="list"></TabBar>
  </div>
</template>

<script>

import TabBar from "@/components/TabBar.vue"
export default {
  name: 'Home',
  components: {
      TabBar
  },
  data(){
    return{
      list:[
      {
        path:"homePage",
        name:"HomePage",
        meta:{
          title:"首页"
        },
        component: () => import( '../views/home/HomePage.vue')
      },
      {
        path:"allJob",
        name:"AllJob",
        meta:{
          title:"所有兼职"
        },
        component: () => import( '../views/home/AllJob.vue')
      },
      {
        path:"squer",
        name:"Squer",
        meta:{
          title:"广场"
        },
        component: () => import( '../views/home/Squer.vue')
      },
      {
        path:"message",
        name:"Message",
        meta:{
          title:"消息"
        },
        component: () => import( '../views/home/Message.vue')
      },
      {
        path:"my",
        name:"My",
        meta:{
          title:"我的"
        },
        component: () => import( '../views/home/My.vue')
      },
    ]
    }
  }
}
</script>
<style lang="scss">
.home{
   display:flex;
   flex-direction: column;
   main{
     flex:1;
   }
  .tabbar{
    width:100%;
    height:.5rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
}
</style>